<template>
  <transition name="dialog-fade" @after-leave="remove">
    <div v-show="show" class="confirm-warp">
      <div class="confirm-mask" />
      <transition name="dialog-slide">
        <div v-show="show" class="confirm-container">
          <div class="confirm-header">
            {{ title }}
            <span class="iconfont icon-close" @click="close('close')" />
          </div>
          <div class="confirm-body"><span class="iconfont icon-info confirm-info" />{{ message }}</div>
          <div class="confirm-footer">
            <button class="confirm-cancel-btn" @click="close('cancel')">{{ option.cancelText }}</button>
            <button class="confirm-sure-btn" @click="close('sure')">{{ option.sureText }}</button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Confirm',
  props: {
    option: {
      type: Object,
      default() {
        return {
          sureText: '确定',
          cancelText: '取消'
        }
      }
    },
    title: {
      type: String,
      default() {
        return '提示'
      }
    },
    message: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
  },
  methods: {
    close(action) {
      this.show = false
      this.$emit('close', action)
    },
    remove() {
      this.$el.remove()
    }
  }
}
</script>

<style scoped>
  .confirm-warp{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    left: 0;
    top: 0;
  }
  .confirm-mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.5);
    left: 0;
    top: 0;
  }
  .confirm-container{
    position: absolute;
    background-color: #ffffff;
    left: 50%;
    top: 30%;
    margin-left: -180px;
    width: 360px;
    border-radius: 4px;
  }
  .confirm-header{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333333;
    position: relative;
    padding:0 15px;
  }
  .confirm-header .icon-close{
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
  .confirm-footer{
    text-align: right;
    padding: 0 15px 15px;
  }
  .confirm-footer button{
    cursor: pointer;
    width: 60px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    border: none;
    outline: none;
    margin-left: 10px;
    border-radius: 4px;
  }
  .confirm-footer button.confirm-sure-btn{
    color: #ffffff;
    background-color: #3a8ee6;
  }
  .confirm-footer button.confirm-cancel-btn{
    background-color: #eaeaea;
    color: #95989e;
  }
  .confirm-body{
    padding: 10px 15px;
    font-size: 14px;
    line-height: 28px;
    color: #818489;
  }
  .confirm-info{
    font-size: 18px;
    margin-right: 5px;
    color: #e69814;
  }
  .dialog-fade-enter-active, .dialog-fade-leave-active {
    transition: all .5s;
  }
  .dialog-fade-leave-to,.dialog-fade-enter{
    opacity: 0;
  }
  .dialog-slide-enter-active, .dialog-slide-leave-active {
    transition: all .5s;
  }
  .dialog-slide-leave-to,.dialog-slide-enter{
    opacity: 0;
    margin-top: -40px;
  }
</style>
